<!--
 * @Author: 宋杰
 * @Date: 2021-01-12 21:13:03
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-14 23:30:29
 * @Description: 一家十一口(猜一字) 第三行 右下图
-->
<template>
  <div>
    <div id="rightTuBiao" style="width:100%; height: 100%;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart: null,
      itemWidth: null,
      itemHeight: null,
    };
  },
  created() {
    this.widthA();
  },
  mounted() {
    this.draw();
  },
  methods: {
    //文字随着屏幕的大小变化
    widthA() {
      var width = window.innerWidth;
      // 最小1366px，最大适配2560px
      if (width <= 1366) {
        this.itemWidth = 14;
        this.itemHeight = 7;
      } else if (1366 < width && width < 1681) {
        this.itemWidth = 18;
        this.itemHeight = 9;
      } else if (1680 < width && width < 1921) {
        this.itemWidth = 22;
        this.itemHeight = 11;
      } else if (1920 < width && width < 2561) {
        this.itemWidth = 26;
        this.itemHeight = 13;
      }
    },
    draw() {
      this.chart = this.$echarts.init(document.getElementById("rightTuBiao"));
      this.chart.setOption({
        // color: ["#ED97FF", "#FFF57B", "#54FFD9 ", "#57E1FF", "#FF4343 "],
        tooltip: {},
        // legend: {
        //   orient: "vertical", // 'vertical'
        //   x: "right",
        //   y: "top",
        //   itemWidth: this.itemWidth,
        //   itemHeight: this.itemHeight,
        //   icon: "pin",
        // },
        grid: {
          // show: true,
          left: "15%",
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            splitLine: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "right",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          axisTick: {
            show: false,
          },
          // name: "日期",
          nameLocation: "start",
          data: ["起诉", "电话", "短信", "上门", "外包"],
        },
        yAxis: {
          splitLine: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          axisLine: {
            show: false,
            splitLine: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "right",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          axisTick: {
            show: false,
          },
          name: "用户数",
        }, // 直角坐标系 Y 轴
        series: [
          // {
          //   name: "用户1",
          //   type: "bar",
          //   barWidth: "40%", //柱图宽度
          //   data: [5],
          // },
          {
            type: "bar",
            barCategoryGap: "40%",
            //设置柱子的颜色
            itemStyle: {
              normal: {
                color: function(params) {
                  // build a color map as your need.
                  var colorList = [
                    "#ED97FF",
                    "#FFF57B",
                    "#54FFD9 ",
                    "#57E1FF",
                    "#FF4343 ",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            //设置柱子的数据,并且居右边+单位
            // label: {
            //   normal: {
            //     show: true,
            //     formatter: "{b}({c}万)",
            //     position: "top",
            //     textStyle: {
            //       color: "#fff",
            //       fontSize: 14,
            //     },
            //   },
            // },
            data: [
              {
                value: 5,
                name: "起诉",
              },
              {
                value: "7",
                name: "电话",
              },
              {
                value: "5",
                name: "短信",
              },
              {
                value: "6",
                name: "上门",
              },
              {
                value: "2",
                name: "外包",
              },
            ],
          },
        ],
      });
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped></style>
